@import '../../less/variables.less';

@base_color:#00b8ec;
@color_active:darken(@base_color,20%);
@color_weekend:#ff3900; //周末颜色
.calendar {
    >div {
        max-width: 400px;
        min-width: 315px;
        margin: 0 auto;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        @time_height: 40;
        .month {
            background: #00B8EC;
            height: @time_height*@base_size;
            line-height: @time_height*@base_size;
            ul {
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: space-between;
                li {
                    color: white;
                    font-size: 20px;
                    text-transform: uppercase;
                    letter-spacing: 3px;
                }
                .arrow {
                    padding: 0 30px;
                }
                .year-month {
                    &:hover {
                        cursor: default;
                    }
                }
            }
        }
        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: #00B8EC;
            display: flex;
            flex-wrap: wrap;
            color: #FFFFFF;
            justify-content: space-around;
            li {
                display: inline-block;
                width: 13.6%;
                text-align: center;
            }
            .weekend{
                color: @color_weekend;
            }
        }
        @day_height: 35;
        .days {
            padding: 5px 0;
            background: #FFFFFF;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            li {
                width: 14.2%;
                text-align: center;
                height: @day_height*@base_size;
                color: #000;
                span {
                    display: block;
                    height: @day_height*@base_size;
                    width: @day_height*@base_size;
                    line-height: @day_height*@base_size;
                    margin: 0 auto;
                    border-radius: 50%;
                    &:hover {
                        background: #e1e1e1;
                        cursor: pointer;
                    }
                    .today{
                        background: @base_color;
                    }
                    .active {
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background:@color_active;
                        color: white;
                    }
                }
            }
            .other-month {                
                color: gainsboro;
            }
        }
    }
}